<template>
  <view class="shaixuan">
    <u-popup v-model="show" mode="top" border-radius="16">
      <view class="wrap">
        <view class="option">
          <view class="title">商家类型</view>

          <view class="items">
            <view class="item" v-for="i in 12" :key="i">服装</view>
          </view>
        </view>

        <view class="option">
          <view class="title">营业时间</view>

          <view class="items">
            <view class="item">24小时营业</view>

            <view class="items range on">
              <view class="item" @click="timeStartShow = true">{{timeStart}}点</view>
              <view class="line"></view>
              <view class="item" @click="timeEndShow = true">{{timeEnd}}点</view>
            </view>
          </view>
        </view>

        <view class="option">
          <view class="title">配送类型</view>

          <view class="items">
            <view class="item">骑手配送</view>
            <view class="item">门店自提</view>
            <view class="item">线下预约</view>
            <view class="item">物流配送</view>
          </view>
        </view>

        <view class="option">
          <view class="title">星级</view>

          <view class="items">
            <view class="item on">1星</view>
            <view class="item">2星</view>
            <view class="item">3星</view>
            <view class="item">4星</view>
            <view class="item">5星</view>
          </view>
        </view>

        <view class="option">
          <view class="title">人数</view>

          <view class="items">
            <view class="item">2人</view>
            <view class="item">3人</view>
            <view class="item">5人</view>
            <view class="item">7人</view>
            <view class="item">10人</view>
          </view>
        </view>

        <view class="option">
          <view class="title">距离</view>

          <view class="items">
            <view class="item">全部</view>

           <view class="flex-row justify-between align-center" style="padding: 0 24rpx;">
             <view>0km</view>
             <view style="width: 400rpx;padding: 0 16rpx;">
               <u-slider v-model="juli"></u-slider>
             </view>
             <view>1km</view>
           </view>
          </view>
        </view>
        
        <view class="option">
          <view class="title">价格</view>
          
          <view class="items">
            <view class="item">全部</view>
          </view>
        </view>

        <view class="option">
          <view class="title">销量</view>
          
          <view class="items">
            <view class="item">从低到高</view>
            <view class="item">从高到低</view>
          </view>
        </view>

        <view class="btns">
          <my-btn :size="[350, 64, 30]" inline @click="onReset">重置</my-btn>
          <my-btn :size="[350, 64, 30]" color="#7373F2" inline @click="onConfirm">确定</my-btn>
        </view>
      </view>
    </u-popup>
    
    
    <u-picker mode="selector" v-model="timeStartShow" @confirm="timeSelect('start', $event)"  :range="[0,1,2,3,4,5,6,7,8,9,10,11,12]"></u-picker>
    <u-picker mode="selector" v-model="timeEndShow" @confirm="timeSelect('end', $event)"  :range="[0,1,2,3,4,5,6,7,8,9,10,11,12]"></u-picker>
  </view>
</template>

<script>
  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        show: false,
        juli: 20,
        timeStart: 0,
        timeEnd: 0,
        timeStartShow: false,
        timeEndShow: false,
      };
    },
    watch: {
      value(val) {
        this.show = val
      },
      show(val) {
        this.$emit('input', val)
      }
    },
    methods: {
      timeSelect(type, val) {
        if (type == 'start') {
          this.timeStart = val[0]
        } else if (type == 'end') {
          this.timeEnd = val[0]
        }
      },
      onReset() {
        
      },
      onConfirm() {
        this.show = false
        this.$emit('confirm', {
          msg: 'hello'
        })
      }
    }
  }
</script>

<style lang="scss">
  .shaixuan {
    .wrap {
      padding: 24rpx;
    }

    .option {
      .title {
        font-size: 24rpx;
        padding: 16rpx 0;
      }

      .items {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
      }
      
      .range {
        margin: 0 24rpx;
        
        .line {
          width: 60rpx;
          height: 4rpx;
          border-radius: 4rpx;
          background: #EBEBEB;
        }
      }

      .item {
        background: #F0F0F0;
        font-size: 26rpx;
        color: #C3C3C3;
        border-radius: 24rpx;
        padding: 8rpx 24rpx;
        margin: 8rpx;
        box-sizing: border-box;
      }
      
      .items.on .item,
      .item.on {
        background: #fff;
        border: 1px solid #f7b550;
        color: #f7b550;
      }
    }
    
    .btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 24rpx;
    }
  }
</style>
